<template>
  <el-form label-width="100px">
      <el-form-item label="SKU名称" >
          <el-input placeholder="请输入SKU名称" v-model="skuParams.skuName"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)" >
          <el-input placeholder="价格(元)" type="number" v-model="skuParams.price"></el-input>
      </el-form-item>
      <el-form-item label="重量(g)">
          <el-input placeholder="重量(g)" type="number" v-model="skuParams.weight"></el-input>
      </el-form-item>
      <el-form-item label="SKU描述">
          <el-input placeholder="SKU描述" type="textarea" v-model="skuParams.skuDesc"></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
          <el-form :inline="true">
              <el-form-item v-for="(item, index) in attrArr" :key="item.id" :label="item.attrName">
                  <el-select  v-model="item.attrIdAndValueId"  style="width: 170px;">
                      <el-option :value="`${item.id}:${attrValue.id}`" v-for="(attrValue, index) in item.attrValueList"
                          :key="attrValue.id" :label="attrValue.valueName"></el-option>
                  </el-select>
              </el-form-item>
          </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
          <el-form :inline="true">
              <el-form-item :label="item.saleAttrName" v-for="(item, index) in saleAttr" :key="item.id">
                  <el-select style="width: 170px;" v-model="item.saleIdAndValueId">
                      <el-option :value="`${item.id}:${saleAttrValue.id}`"
                          v-for="(saleAttrValue, index) in item.spuSaleAttrValueList" :key="saleAttrValue.id"
                          :label="saleAttrValue.saleAttrValueName"></el-option>
                  </el-select>
              </el-form-item>
          </el-form>
      </el-form-item>
      <el-form-item label="图片名称">
          <el-table border :data="imgArr" ref="table" >
              <el-table-column type="selection" width="80px" align="center"></el-table-column>
              <el-table-column label="图片">
                  <template #="{ row, $index }">
                      <img :src="row.imgUrl" alt="" style="width:100px;height: 100px;">
                  </template>
              </el-table-column>
              <el-table-column label="名称" prop="imgName"></el-table-column>
              <el-table-column label="操作">
                  <template #="{ row, $index }">
                      <el-button type="primary" size="small" @click="handler(row)">设置默认</el-button>
                  </template>
              </el-table-column>
          </el-table>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" size="default" @click="save">保存</el-button>
          <el-button type="primary" size="default" @click="cancel">取消</el-button>
      </el-form-item>
  </el-form>
</template>



<script setup lang="ts">
import { reqAttr } from '@/api/product/attr';
import { reqSpuImageList,reqSpuSaleAttr,reqAddSku } from '@/api/product/spu'; 
import {ref,reactive} from 'vue'
import type { Attr } from '@/api/product/attr/type';
import type { SaleAttr ,SpuImg,SkuData} from '@/api/product/spu/type';
import { ElMessage } from 'element-plus';

//存储平台属性  销售属性   照片墙数据
let attrArr = ref<Attr[]>([])
let saleAttr = ref<SaleAttr[]>([])
let imgArr = ref<SpuImg[]>([])

//1.收集sku的参数
let skuParams = reactive<SkuData>(
    {
// 前三个是父组件传递过来的数据，用父组件收集
  category3Id: "" ,//三级分类的ID
  spuId:"", //已有的SPU的ID
  tmId: "" ,//SPU品牌的ID
//   通过v-model收集
  skuName: "" ,//sku名字
  price:"" ,//sku价格
  weight:"", //sku重量
  skuDesc: "" ,//sku的描述
  skuAttrValueList:[],
  skuSaleAttrValueList: [],
  skuDefaultImg: ""//sku图片地址
}
)
//获取table组件
let table = ref<any>()

let $emit = defineEmits(['changeScene'])

const cancel = ()=>{
  // 切换为场景0
  $emit('changeScene',{flag:0,params:''})
}

//当前子组件的方法对外暴露
const initSkuData = async(c1Id:number|string,c2Id:number|string,spu:any) => {
//为收集sku的参数
skuParams.category3Id = spu.category3Id
skuParams.spuId = spu.id
skuParams.tmId = spu.tmId


  //获取平台属性
  let result:any = await reqAttr(c1Id,c2Id,spu.category3Id)
  // 获取对应的销售属性
  let result1:any = await reqSpuSaleAttr(spu.id)
  // 获取照片墙的数据
  let result2:any = await reqSpuImageList(spu.id)

    attrArr.value = result.data
    saleAttr.value = result1.data
    imgArr.value = result2.data
}
//默认图片方法回调
const handler = (row:any)=>{
    // 收集图片地址
     skuParams.skuDefaultImg = row.imgUrl
    //  控制复选框是否勾选
    imgArr.value.forEach((item:any) => {
        table.value.toggleRowSelection(item,false)
    });
    table.value.toggleRowSelection(row,true)
}
//保存回调
const save = async()=>{
    // 先收集到平台属性对象【attrArr】身上，点击保存时，整理成服务器的格式，带给服务器
    //最终还是要放到skuParams里，追加  reduce接收的是最后一轮返回的结果
    // 平台属性
    skuParams.skuSaleAttrValueList = attrArr.value.reduce((prev:any,next:any)=>{
        if(next.attrIdAndValueId){
            let [attrId,valueId] = next.attrIdAndValueId.split(':')
            prev.push({
                attrId,
                valueId
            })
        }
        return prev
    },[])

    //销售属性
    skuParams.skuSaleAttrValueList = saleAttr.value.reduce((prev:any,next:any)=>{
        if(next.saleIdAndValueId){
            let [saleAttrId,saleAttrValueId] = next.saleIdAndValueId.split(':')
            prev.push({
                saleAttrId,
                saleAttrValueId
            })
        }
        return prev
    },[])

//发请求
let result:any =await reqAddSku(skuParams)
if(result.code==200){
    ElMessage({
        type:'success',
        message:'添加sku成功'
    })
    //通知父组件切换场景
    $emit('changeScene',{flag:0,params:''})
}else{
    ElMessage({
        type:'error',
        message:'添加sku失败'
    })
}

}
defineExpose({initSkuData})
</script>

<style scoped>

</style>